import React from 'react'
import UserMenu from '../user_menu/user_menu';
import { Link } from 'react-router-dom'

import './navigator.css'

class Navigator extends React.Component {

    state={
        active:0
    }

    render() {
        const menu = [{
            component:
                <a href="#">
                <i className="iconfont icon-faxian" />
                <span> 发现</span>
                </a>
        },{
            component:
            <a href="#">
            <i className="iconfont icon-guanzhu" />
            <span> 关注</span>
            </a>
        },{
            component:
            <a href="#">
            <i className="iconfont icon-iconxx1" />
            <span> 消息</span>
            </a>
        }]
        return <div id="navigator">
                <Link to="/" className="logo">
                    <img src={require("../../imgs/logo.png")} />
                </Link>
                <div className="menu">
                    {menu.map((val, key)=>(
                        <div className={`tab ${this.state.active==key?'active':''}`} key={key} onClick={()=>this.setState({active:key})}>
                            {val.component}
                        </div>
                    ))}
                </div>
                <div className="userinfo">
                    <UserMenu />
                    <Link to="/article_edit" className="btn_write"><i className="iconfont icon-xiezi" /> 写文章</Link>
                </div>
        </div>
    }
}

export default Navigator